import React, { Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { IRoute } from '../types/route';
import { layoutRoutes } from '../utils/routes';
import config from '../config';

const AppRouter: React.FC = () => {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <BrowserRouter>
        <Switch>
          {layoutRoutes.map((route: IRoute) => (
            <Route key={config.BASENAME + route.path} path={route.path} component={route.component} />
          ))}
        </Switch>
      </BrowserRouter>
    </Suspense>
  );
};

export default AppRouter;
